<template>
	<view class="box">
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<view class="header">
			<view class="tabBox">
				<view @click="searchRang(1)" :class="{ 'tarBarBorder' : search_dataRang == 1 }">我的</view>
				<view @click="searchRang(2)" :class="{ 'tarBarBorder' : search_dataRang == 2 }">上级运营商</view>
			</view>
		</view>
		<view class="content" style="margin-top: 0px;">
			<uni-card title="" extra="">
				<template v-slot:title>
					<view style="border-bottom: 1px solid #E6E6E6;">
						<view style="padding: 10px; float: left;">
							<text>资费列表</text>
						</view>
						<button v-if="search_dataRang == 1" @click="addCost()" type="primary" size="mini"
							style="background-color: #4DA7FF; float: right; margin-top: 14rpx;">新建模板</button>
						<view class="clear"></view>
					</view>
				</template>
				<view class="uni-body" style="font-size: 15px!important; margin-bottom: 10px;">
					<uni-table :loading="tabLoading" ref="table" type="default" emptyText="暂无更多数据">
						<uni-tr class="tabTr">
							<uni-th width="100" align="center" style="background-color: #EFF8FF!important;">模板名称
							</uni-th>
							<uni-th width="100" align="center" style="background-color: #EFF8FF!important;">状态</uni-th>
							<uni-th width="100" align="center" style="background-color: #EFF8FF!important;">操作</uni-th>
						</uni-tr>
						<uni-tr class="tabTr" v-for="(item, index) in tabData" :key="index">
							<uni-td align="left">{{ item.name }}</uni-td>
							<uni-td align="center">
								<text v-if="item.status === 1">启用</text>
								<text v-if="item.status === 0" style="color: red;">停用</text>
							</uni-td>
							<uni-td align="center">
								<!-- <button @click="editCost(item.id)" v-if="search_dataRang === 3" type="primary" size="mini" style="background-color: #4DA7FF; width: 150rpx; position: relative; top: 8rpx;">编辑</button>
								<button @click="copyCost(item.id)" v-if="search_dataRang === 2" type="primary" size="mini" style="background-color: #4DA7FF; width: 150rpx; position: relative; top: 8rpx;">复制</button> -->
								<text @click="editCost(item)" v-if="search_dataRang == 1"
									style="color: #4DA7FF;">编辑</text>
								<text @click="openCost(item)" v-if="search_dataRang == 1 && item.status === 0"
									style="color: #4DA7FF; margin-left: 10rpx;">启用</text>
								<text @click="openCost(item)" v-if="search_dataRang == 1 && item.status === 1"
									style="color: #4DA7FF; margin-left: 10rpx;">停用</text>
								<text @click="copyCost(item)" v-if="search_dataRang == 2"
									style="color: #4DA7FF;">复制</text>
							</uni-td>
						</uni-tr>
					</uni-table>
					<uni-pagination @change="changePage()" pageSize="10" :current="current" :total="total"
						:show-icon="true" prev-text="前一页" next-text="后一页" />
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import {
		chargeTmpl
	} from '@/api/equip.js';
	export default {
		data() {
			return {
				search_dataRang: 1,
				tabLoading: false,
				current: 1,
				total: '',
				tabData: [],
				msgType: '',
				messageText: ''
			}
		},
		onLoad() {
			this.search_dataRang = 1;
			this.getList();
		},
		methods: {
			// 选择查询范围
			searchRang(e) {
				this.search_dataRang = e;
				this.tabData = [];
				this.getList();
			},
			// 获取列表
			getList() {
				this.$Toast.loading('加载中');
				chargeTmpl('/selectProgram', 'get', {
						type: this.search_dataRang,
						pageNum: this.current,
						pageSize: 10
					}).then(res => {
						uni.hideLoading();

						this.tabData = [];
						this.tabData = res.data.records;
						this.total = res.data.total;
					})
					.catch(err => {
						uni.hideLoading();
					})
			},
			// 新增资费模板
			addCost() {
				uni.navigateTo({
					url: '/pages/myFunction/costTemplateDetail'
				});
			},
			// 编辑
			editCost(item) {
				if (item.status === 0) {
					this.$Toast.error('停用状态无法编辑！');
					return;
				}
				uni.navigateTo({
					url: '/pages/myFunction/costTemplateDetail?chargeTmplId=' + item.id
				});
			},
			// 启用停用资费模版
			openCost(item) {
				let stat = item.status == 1 ? 0 : 1;
				let msg = item.status == 1 ? '停用成功' : '启用成功';
				let load = item.status == 1 ? '停用中···' : '启用中···';
				this.$Toast.loading(load);
				chargeTmpl('/updateStatus', 'put', {
					id: item.id,
					status: stat
				}).then(res => {
					if (res.code == 200) {
						this.$Toast.success(msg);
						this.getList();
					}
				})

			},
			// 复制
			copyCost(item) {
				uni.navigateTo({
					url: `/pages/myFunction/costTemplateDetail?chargeTmplId=${item.id}&isCopy=${true}`
				});
			},
			// 分页
			changePage(e) {
				this.current = e.current;
				this.getList();
			}
		}
	}
</script>

<style>
	.header {
		width: 100%;
		background-color: #1976D3;
	}

	.tabBox {
		width: 100%;
		background-color: #FFFFFF;
	}

	.tabBox view {
		width: 50%;
		line-height: 40px;
		text-align: center;
		color: #1976D3;
		display: inline-block;
	}

	.tarBarBorder {
		border-bottom: 2px solid #1976D3;
	}

	/deep/ .uni-table-tr {
		background-color: #EFF8FF !important;
		color: #346D9C !important;
		border: 1px solid #FFFFFF !important;
	}

	/deep/ .uni-table-td {
		color: #000000 !important;
		border: 1px solid #FFFFFF !important;
		padding: 5px !important;
		display: table-cell !important;
		vertical-align: middle !important;
	}

	/deep/ .uni-table-th {
		color: #346D9C !important;
		border: 1px solid #FFFFFF !important;
		padding: 5px !important;
	}

	.tdView {
		padding: 5px;
		text-align: center;
	}

	/deep/ button::after {
		border: none;
	}
</style>
